<template>
  <div id="hotel-facilities">
    <div class="warpper">
      <el-form label-width="70px">
        <el-form-item label="通用设施">
          <ul class="typeList">
            <li v-for="item in typeList"
              :key="item.id"
              @click="select(item)"
              :class="{ 'actived': item.sign}">{{item.name}}</li>
          </ul>
        </el-form-item>
        <el-form-item label="服务项目">
          <el-input type="textarea"
            :rows="5"
            v-model="form.serviceProject"
            placeholder="请输入服务项目"></el-input>
        </el-form-item>
        <el-form-item label="客房设施">
          <el-input type="textarea"
            :rows="5"
            v-model="form.roomFacilities"
            placeholder="请输入客房设施"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="information-btn">
      <el-form-item>
        <el-button type="primary"
          @click="next"
          v-if="isCreate">下一步</el-button>
        <el-button type="primary"
          @click="back"
          v-if="isCreate">返回</el-button>
        <el-button type="primary"
          @click="next"
          v-if="!isCreate">保存</el-button>
        <el-button @click="back"
          v-if="!isCreate">关闭</el-button>
      </el-form-item>
    </div>
  </div>
</template>
<script>
import { updateFacilities, hotelType } from "@/public/js/hotelInfomation";

const ButtonFooter = () => import("@/components/common/ButtonFooter");

export default {
  props: ["datas"],
  data() {
    return {
      isCreate: true,
      typeList: []
    };
  },
  computed: {
    form() {
      return this.datas[0];
    }
  },
  updated() {
     if (this.datas[0].types) {
      this.typeList = this.datas[0].types;
    }
  },
  created() {
    this.isCreate = JSON.parse(sessionStorage.getItem("isCreate"));
    sessionStorage.removeItem("last");
    this._hotelType();
  },
  methods: {
    //获取设施标签
    _hotelType() {
      hotelType().then(res => {
        console.log(res);
        this.typeList = res.data.hotelTypes;
      });
    },
    next() {
      let types = [];
      this.typeList.forEach(item => {
        if (item.sign) {
          types.push(item.id);
        }
      });

      let data = {
        hotelId: sessionStorage.getItem("hotelId"),
        typeId: types,
        serviceProject: this.datas[0].serviceProject,
        roomFacilities: this.datas[0].roomFacilities
      };
      updateFacilities(data).then(res => {
        if (!res.data.errCode) {
          if (this.isCreate) {
            // 切换tab
            this.$emit("input", "third");
          } else {
            this.$message.success("修改成功");
          }
        }
      });
    },
    // 返回
    back() {
      this.$router.go(-1);
    },
    select(item) {
      if (typeof item.sign == "undefined") {
        this.$set(item, "sign", true);
      } else {
        item.sign = !item.sign;
      }
    }
  },
  components: {
    ButtonFooter
  }
};
</script>

<style lang="scss">
.warpper {
  width: 45%;
  padding: 10px;
  margin-top: 10px;
  .el-form-item {
    margin-bottom: 20px;
  }
}
.information-btn {
  padding: 8px 0px 8px 55px;
  text-align: left;
  position: fixed;
  bottom: 0;
  background-color: white;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
  width: 79.7%;
  z-index: 1000;
  .el-form-item {
    margin-bottom: 0;
    .el-form-item__content {
      margin-left: 0 !important;
    }
    .el-button {
      width: 82px;
      height: 34px;
      padding: 0px;
    }
  }
}
.typeList {
  display: flex;
  width: 800px;
  flex-flow: row wrap;
  text-align: center;
  & > li {
    width: 15%;
    margin-right: 15px;
    border: 1px solid #6d2377;
    margin-bottom: 15px;
    border-radius: 4px;
    cursor: pointer;
    &.actived {
      background: #6d2377;
      color: #fff;
    }
  }
}
</style>
